import React, { useState, useEffect } from "react";
import { Button, Form, Input, Space, Table, Tag } from "antd";
import { getTableScroll } from "@/utils";
import {
  SearchOutlined,
  ArrowUpOutlined,
  FormOutlined,
  DeleteOutlined,
} from "@ant-design/icons";

function Task() {
  const [form] = Form.useForm();
  const [scrollY, setScrollY] = useState("");
  useEffect(() => {
    setScrollY(getTableScroll({ extraHeight: 84 }));
  }, []);
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      key: "action",
      fixed: "right",
      align: "center",
      width: 200,
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" icon={<FormOutlined />}>
            编辑
          </Button>
          <Button type="link" icon={<DeleteOutlined />} danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];
  return (
    <div className="user layout-page">
      <Form
        layout="inline"
        form={form}
        style={{
          marginBottom: "10px",
        }}
      >
        <Form.Item label="账号">
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item label="姓名">
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
      </Form>
      <div className="layout-btn">
        <div className="btn-left">
          <Button type="primary" icon={<ArrowUpOutlined />}>
            导入
          </Button>
        </div>
        <div className="btn-right"></div>
      </div>
      <Table
        columns={columns}
        dataSource={data}
        scroll={{
          x: "max-content",
          y: scrollY,
          scrollToFirstRowOnChange: true,
        }}
      />
    </div>
  );
}

export default Task;
